<!--用户详情 -->
<template>
  <div class="detail-index-content">
    <Modal
      v-model="modalValue"
      :title="titleName"
      footer-hide
      width="920"
      @on-cancel="cancel"
    >
      <div class="user-main">
        <Row :gutter="30">
          <Col span="6">
            <h3>组织架构</h3>
            <Tree
              :data="companyTree"
              @on-select-change="selectCompanyDept"
            ></Tree>
          </Col>
          <Col span="18">
            <Table :columns="columns" :data="listData">
              <template slot-scope="{ row }" slot="checkbox">
                <Checkbox
                  :disabled="row.isDisabled"
                  v-model="row.isPrincipal"
                  @on-change="checkChange($event, row)"
                ></Checkbox>
              </template>
            </Table>
            <PageAtion
              v-if="total"
              :total="total"
              :size.sync="formData.size"
              :page.sync="formData.page"
              @pageSizeChange="pageSizeChange"
            />
          </Col>
          <Col span="24" style="margin-top: 20px">
            <Button
              type="primary"
              :loading="isLoading"
              @click="handleSubmit('FormRef')"
              >确认</Button
            >
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script type="text/javascript">
import {
  addCompany, // 创建公司
  setUserIsPrincipal, // 修改公司
  getOrgAllUserAndStatisticsPage, // 根据部门查询用户
} from "@/api/system.js";

export default {
  name: "setPersonInCharge",
  components: {},
  props: {
    echoData: {
      type: Array,
      default: () => [],
    },
    isHide: {
      type: Boolean,
      default: false,
    },
    titleName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formData: {
        isPrincipal: true,
        userId: "",
        companyDepartmentId: "",
        size: 10,
        page: 1,
      },
      total: 0,
      companyTree: [],
      modalValue: false,
      isLoading: false,
      columns: [
        {
          title: "选择",
          width: 60,
          slot: "checkbox",
          width: 72,
          align: "center",
        },
        {
          title: "用户名称",
          key: "realName",
        },
        {
          title: "手机号",
          key: "mobile",
        },
        // {
        //   title: "用户角色",
        //   key: "role",
        // },
        {
          title: "发布信息数",
          key: "publishBusinfoCount",
        },
        {
          title: "被企业接受",
          key: "publishBusinfoBeReceiveCount",
        },
        {
          title: "经营信息已投标",
          key: "feedBackAlreadyDeliverTenderBeReceiveCount",
        },
        {
          title: "状态",
          width: 80,
          key: "accountStatusName",
        },
      ],
      listData: [],
    };
  },
  methods: {
    cancel() {
      this.$emit("update:updateIsHide", false);
    },
    selectCompanyDept(ev) {
      this.formData.page = 1;
      this.formData.size = 10;
      console.log(ev, "111");
      if (ev.length && ev[0].types == 2) {
        this.formData.companyDepartmentId = ev[0].companyDepartmentId;
        this.getOrgAllUserAndStatisticsPageData();
      } else {
        this.formData.companyDepartmentId = "";
        this.formData.companyDepartmentId = "";
        this.listData = [];
      }
    },
    pageSizeChange() {},
    async setUserIsPrincipalData() {
      try {
        this.isLoading = true;
        let data = await setUserIsPrincipal(this.formData);
        this.isLoading = false;
        this.$Message.success("部门负责人设置成功！");
        this.$emit("actionSuccess");
        this.$emit("update:updateIsHide", false);
      } catch (error) {
        this.isLoading = false;
      }
    },
    handleSubmit(name) {
      this.setUserIsPrincipalData();
    },
    async getOrgAllUserAndStatisticsPageData() {
      let data = await getOrgAllUserAndStatisticsPage(this.formData);
      console.log(data, "getOrgAllUserAndStatisticsPageData");
      data.data.forEach((o) => {
        o.isDisabled = false;
      });
      this.listData = data.data;
      this.total = data.total;
    },
    checkChange(ev, row) {
      console.log(ev, row);
      if (ev) {
        this.formData.userId = row.userId;
        this.formData.companyDepartmentId = row.companyDepartmentId;
      } else {
        this.formData.userId = "";
        this.formData.companyDepartmentId = "";
      }
      this.listData.forEach((o) => {
        o.isDisabled = false;
        if (o.userId != row.userId && ev) {
          o.isDisabled = ev;
        }
      });
    },
  },
  created() {
    console.log(this.$props.echoData, "this.$props.echoData");
    this.companyTree = JSON.parse(JSON.stringify(this.$props.echoData));
    const companyList = (list, types) => {
      list.forEach((o) => {
        if (types == 2) {
          o.title = o.companyDepartmentName;
          o.id = o.companyDepartmentId;
          o.expand = true;
          o.types = types;
        }
        o.children = o.childrenDepartmentList;
        if (o.children) {
          companyList(o.children, 2);
        }
      });
    };

    companyList(this.companyTree, 1);

    this.modalValue = this.$props.isHide;
  },
};
</script>

<style lang="less" scoped>
.ivu-radio-group {
  width: 100%;
}
.head-img {
  display: flex;
  justify-content: center;
  img {
    width: 80px;
    height: 80px;
  }
}
.real-name {
  text-align: center;
  font-size: 14px;
  margin: 20px 0 30px 0;
}
.user-info-main {
  display: flex;
  .info-left {
    margin-right: 10px;
  }
  .info-right {
    line-height: 1;
    padding-top: 8px;
    h4 {
      font-size: 16px;
      font-weight: normal;
    }
    p {
      font-size: 24px;
      margin-top: 10px;
    }
  }
}
.user-main {
  padding: 20px;
}
</style>
